<template>
  <div class="vue-switch" :class="{'z-on':close}" @click="toggle">
    <span class="open ">{{ openName }}</span>
    <span class="close">{{ closeName }}</span>
  </div>

</template>

<script>
  'use strict';

  export default {
    props: {
      value: {
        type: Boolean,
        default: true,
      },
      openValue: {
        default: true
      },
      closeValue: {
        default: false
      },
      openName: {
        type: String,
        default: '是'
      },
      closeName: {
        type: String,
        default: '否'
      },
      disabled: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        close: true
      }

    },
    computed: {},
    methods: {
      toggle() {
        this.close = !this.close;
        let swichVal = '';
        if(this.close){
          //console.log('有券');
          swichVal = 'dpyhq,'
        }else{
          swichVal = '';
        }
        this.$emit('on-toggle',swichVal)
      }
    }
  }

</script>

<style lang="less" scoped>

  // 颜色
  @c1: #d33;
  @c2: #3091f2;
  @c3: #f60;
  @c4: #0c6;

  // 尺寸
  @md: 48px;
  @lg: 60px;

  .vue-switch {
    margin-left: 0.15rem;
    position: relative;
    display: inline-block;
    width: 1.16rem;
    height: 0.5rem;
    line-height: 0.5rem;
    border-radius: 20px;
    border: 1px solid #d5d5d5;
    background-color: #d5d5d5;
    cursor: pointer;
    transition: all 0.21s ease;
    user-select: none;
    overflow: hidden;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    transform: rotate(0deg);

    span {
      position: absolute;
      font-size: 12px;
      left: 25px;
      color: #222;

      &.open {
        display: none;
      }

      &.close {
        display: inline;
      }
    }

    &::after {
      position: absolute;
      content: '';
      width: 23px;
      height: 23px;
      border-radius: 50%;
      background-color: #fff;
      left: 1px;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
      transition: left 0.23s ease, width 0.23s ease, background-color 0.23s ease;
    }
    &.z-on {
      background-color: @c4;
      border-color: @c4;

      span {
        color: #fff;
        left: 10px;

        &.open {
          display: inline;
        }

        &.close {
          display: none;
        }
      }
      &::after {
        left: 0.70rem;
      }
    }
  }


</style>
